<template>
	<view>
		<!-- 图片视频上传 -->
		<view class="df src-box">
			<view
				class="item"
				v-show="value.length"
				v-for="(src, i) in value"
				:key="i"
			>
				<view class="item-bd box-s">
					<video
						v-if="!isPicture(src)"
						class="item-cont"
						:src="src"
					></video>
					<image
						v-if="isPicture(src)"
						class="item-cont"
						mode="aspectFill"
						:src="src"
					></image>
				</view>
				<view class="shade-box" @tap="showPreview(src)"></view>
			</view>
		</view>
		<uni-popup ref="previewPopup">
			<view class="preview-bd">
				<view class="popup-title">
					预览
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup()"
					></uni-icons>
				</view>
				<view class="pd20 df jsc">
					<video
						v-if="!isPicture(previewSrc)"
						class="preview-img"
						:src="previewSrc"
					></video>
					<!-- <image v-if="isPicture(previewSrc)" class="preview-img" mode="aspectFit" :src="previewSrc"></image> -->
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import { isPicture } from '@/common/utils.js'
export default {
	name: 'show-media',
	props: {
		value: {
			type: Array,
			value: [],
		},
	},
	data() {
		return {
			isPicture,
			previewSrc: '',
		}
	},
	created() {},
	methods: {
		//预览
		showPreview(item) {
			this.previewSrc = item
			let imgList = this.value.filter((res) => {
				return isPicture(res)
			})
			if (isPicture(item)) {
				let index = imgList.findIndex((res) => {
					return res === item
				})
				uni.previewImage({
					current: index,
					urls: imgList,
				})
			} else {
				this.$refs.previewPopup.open('center')
			}
		},
		//关闭弹窗
		closePopup() {
			this.$refs.previewPopup.close()
		},
	},
	watch: {},
}
</script>

<style scoped lang="scss">
.src-box {
	flex-wrap: wrap;
}

.item {
	width: 33.3%;
	height: 0;
	padding-top: 33.33%;
	position: relative;
	box-sizing: border-box;
}
.item-bd {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-right: 20rpx;
	margin-top: 20rpx;
	background-color: #ffffff;
}
.shade-box {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 10rpx;
	z-index: 5;
	background-color: #ffffff;
	opacity: 0;
}

.item-cont {
	width: 100%;
	height: 100%;
}

.box-s {
	flex-direction: column;
}

.text-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 32rpx;
	line-height: 40px;
}
.preview-bd {
	width: 90vw;
	height: 70vh;
	background-color: #ffffff;
}
.preview-img {
	width: 80vw;
	height: calc(70vh - 200rpx);
}
</style>
